<main-layout [sliderWidth]="sliderWidth" (toggle)="this.toggleCollapsed($event)">
  <main-header>
    <ul nz-menu [nzMode]="'horizontal'" style="padding: 0 24px;line-height: 46px;">
      <li [nzSelected]="group_type==0" nz-menu-item (click)="group_type=0;getList(true,true);">普通拼团</li>
      <li [nzSelected]="group_type==1" nz-menu-item (click)="group_type=1;getList(true,true);">拉新拼团</li>
      <li [nzSelected]="group_type==2" nz-menu-item (click)="group_type=2;getList(true,true);">抽奖拼团</li>
    </ul>

  </main-header>
  <main-slider>
    <div style="height:100%;">
      <ul nz-menu [nzMode]="'inline'" [nzInlineCollapsed]="isCollapsed" style="height:100%;"
          [style.overflow-y]="isCollapsed?'':'auto'" [style.overflow-x]="isCollapsed?'':'hidden'">
        <li nz-menu-item style="padding-left:24px;" [nzSelected]="stage == 1" (click)="status='';changeGroupStage(1)">
          <i class="anticon anticon-minus-circle-o"></i>
          <span>未开始</span>
        </li>
        <li nz-menu-item style="padding-left:24px;" [nzSelected]="stage == 2" (click)="status='1';changeGroupStage(2)">
          <i class="anticon anticon-play-circle-o"></i>
          <span>进行中</span>
        </li>
        <li nz-menu-item style="padding-left:24px;" [nzSelected]="stage == 4" (click)="status='2';changeGroupStage(4)">
          <i class="anticon anticon-pause-circle-o"></i>
          <span>已暂停</span>
        </li>
        <li nz-menu-item style="padding-left:24px;" [nzSelected]="stage == 3" (click)="status='';changeGroupStage(3)">
          <i class="anticon anticon-reload"></i>
          <span>已结束</span>
        </li>
      </ul>
    </div>
  </main-slider>
  <main-content>

    <div nz-form-item nz-row style="margin-top:25px;">
      <div nz-col [nzSm]="24">
        <div class="text-left">
          <label>活动名称：</label>
          <nz-input [nzSize]="'large'" name="keyword" [(ngModel)]="name" [nzPlaceHolder]="'请输入活动名称'" style="width: 185px;" (keydown)="keyDown($event)"></nz-input>
          <button nz-button [nzType]="'primary'" [nzSize]="'large'" style="margin-left:22px;" (click)="getList(true);">
            查 询
          </button>
          <button nz-button class="ml-7" (click)="name='';getList(true)" [nzSize]="'large'">重 置</button>
        </div>
      </div>
    </div>

    <div class="product-operate clearfix">
      <div nz-col [nzSm]="12">
        <button nz-button [nzType]="'primary'" [nzSize]="'large'" *ngIf="group_type===0" (click)="goAddPage(1)">
          <i class="anticon anticon-plus"></i><span>新建普通拼团</span>
        </button>
        <button nz-button [nzType]="'primary'" [nzSize]="'large'" *ngIf="group_type===1" (click)="goAddPage(2)">
          <i class="anticon anticon-plus"></i><span>新建拉新拼团</span>
        </button>
        <button nz-button [nzType]="'primary'" [nzSize]="'large'" *ngIf="group_type===2" (click)="goAddPage(3)">
          <i class="anticon anticon-plus"></i><span>新建抽奖拼团</span>
        </button>
        <button nz-button [nzType]="'default'" [nzSize]="'large'" *ngIf="stage===1 && checkedIds.length"
                (click)="deleteCheckedGroup()">
          <i class="anticon anticon-delete"></i><span>批量删除</span>
        </button>
        <button nz-button [nzType]="'default'" [nzSize]="'large'" *ngIf="stage===2 && checkedIds.length"
                (click)="batchCheckedGroupStatus('暂停')">
          <i class="anticon anticon-delete"></i><span>批量暂停</span>
        </button>
        <button nz-button [nzType]="'default'" [nzSize]="'large'" *ngIf="stage===4 && checkedIds.length"
                (click)="batchCheckedGroupStatus('正常')">
          <i class="anticon anticon-delete"></i><span>批量恢复</span>
        </button>
      </div>
    </div>
    <div class="product-list-out mt-16">
      <div class="checked-line" *ngIf="!!checkedIds.length">
        <i class="anticon anticon-info-circle"></i> 已选择 <span>{{checkedIds.length}}</span> 项
        <a href="javascript:;" (click)="checkedIds=[];_indeterminate=false;_checkAll(false);">清空</a>
      </div>
      <nz-table [(nzLoading)]="loading"
                [nzCustomNoResult]="true"
                [(nzPageSize)]="pageSize"
                [(nzPageIndex)]="page"
                [(nzTotal)]="total"
                (nzPageIndexChange)="getList()"
                [nzAjaxData]="groupsList">
        <thead nz-thead>
        <tr>
          <th nz-th [nzCheckbox]="true">
            <label nz-checkbox [(ngModel)]="_allChecked" [nzIndeterminate]="_indeterminate"
                   (ngModelChange)="_checkAll($event)">
            </label>
          </th>
          <th nz-th style="width: 300px;"><span>拼团名称</span></th>
          <th nz-th><span>拼团单价</span></th>
          <th nz-th><span>状态</span></th>
          <th nz-th>
            <span>有效时间</span>
            <nz-table-sort [(nzValue)]="orderJson.start_date"
                           (nzValueChange)="sort('start_date',$event)"></nz-table-sort>
          </th>
          <th nz-th><span>查看详情</span></th>
          <th nz-th *ngIf="group_type === 0 && (stage === 2 || stage === 1 || stage === 4)"><span>拼团二维码</span></th>
          <th nz-th style="width: 120px"><span>操作</span></th>
        </tr>
        </thead>
        <tbody nz-tbody *ngIf="groupsList.length>0">
        <ng-container *ngFor="let item of groupsList">
          <tr nz-tbody-tr>
            <td nz-td [nzCheckbox]="true">
              <label nz-checkbox [(ngModel)]="item.checked" [nzDisabled]="!item.effective"
                     (ngModelChange)="checkedSingele($event, item.id)">
              </label>
            </td>
            <td nz-td>
              <div class="ver-mid">
                {{item.name}}
              </div>
            </td>
            <td nz-td>
              <div>¥ {{(!!item.activity_goods)?item.activity_goods[0].price:''}}</div>
            </td>
            <td nz-td>
              <span class="ant-badge-status-dot ant-badge-status-default" *ngIf="stage === 1"></span>
              <span class="ml-8" *ngIf="stage === 1">未开始</span>
              <span class="ant-badge-status-dot ant-badge-status-success"
                    *ngIf="item.status==='正常' && stage === 2"></span>
              <span class="ant-badge-status-dot ant-badge-status-error"
                    *ngIf="item.status==='暂停' && stage === 4"></span>
              <span class="ml-8" *ngIf="item.status==='正常' && stage === 2">{{item.status}}</span>
              <span class="ml-8" *ngIf="item.status==='暂停' && stage === 4">{{item.status}}</span>
              <span class="ant-badge-status-dot ant-badge-status-processing" *ngIf="stage === 3"></span>
              <span class="ml-8" *ngIf="stage === 3">已结束</span>
            </td>
            <td nz-td>
              <div>从{{item.start_date}}</div>
              <div>至{{item.end_date}}</div>
            </td>
            <td nz-td>
              <div>
                <a class="ant-dropdown-link" nz-dropdown (click)="openType(item,'showProduct')">
                  <i class="anticon anticon-down" *ngIf="!item.showProduct"></i>
                  <i class="anticon anticon-up" *ngIf="item.showProduct"></i>
                  商品详情
                </a>
              </div>
              <div>
                <a class="ant-dropdown-link" nz-dropdown (click)="openType(item,'showGroup')">
                  <i class="anticon anticon-down" *ngIf="!item.showGroup"></i>
                  <i class="anticon anticon-up" *ngIf="item.showGroup"></i>
                  拼团详情
                </a>
              </div>
            </td>
            <td nz-td *ngIf="group_type === 0 && (stage == 2 || stage == 1 || stage == 4)">
              <a (click)="showQrCodeModal(item)">二维码详情</a>
            </td>
            <td nz-td>
              <a *ngIf="(stage === 1 || stage === 2 || stage === 4)  && item.effective && group_type !== 2"
                 (click)="goEditPage(item.id)"
              >编辑</a>
              <a *ngIf="(stage === 1 || stage === 2 || stage === 4)  && item.effective && group_type === 2"
                 (click)="goEditPage(item.id)"
              >编辑</a>
              <a *ngIf="stage === 3 && group_type !== 2" (click)="goResetPage(item.id)">重开</a>
              <a *ngIf="stage === 3 && group_type === 2" (click)="goResetPage(item.id)">重开</a>
              <span nz-table-divider class="span-divider"
                    *ngIf="((group_type == 0 || group_type == 1) && (stage == 1 || stage == 2 || stage == 4 )) && item.effective || (group_type == 2 && item.effective)"></span>
              <a (click)="deleteGroup(item.id)" *ngIf="stage === 1">删除</a>
              <a *ngIf="item.status === '正常' && stage === 2" (click)="changeGroupStatus(item.id, '暂停')">暂停</a>
              <a *ngIf="item.status === '暂停' && stage === 4 && item.effective"
                 (click)="changeGroupStatus(item.id, '正常')">恢复</a>
              <a *ngIf="group_type===2 && stage === 3" (click)="goWinnerPage(item.id)">中奖详情</a>
            </td>
          </tr>
          <tr nz-tbody-tr *ngIf="item.showProduct && item.goodsInfo && item.goodsInfo.prize_info.length == 0"
              class="product-detail-td">
            <td nz-td colspan="3">
              <div class="clearfix product-item">
                <div class="fl ">
                  <img class="product-cover"
                       [src]="item?.goodsInfo.first_picture ? aliyunOssOutputUrl+'/'+item?.goodsInfo.first_picture : '' "/>
                </div>
                <div class="product-detail">
                  <div class="font-bold" *ngIf="item.goodsInfo.goods_num">
                    <nz-popover [nzTitle]="'商品编号'" *ngIf="item.goodsInfo.goods_numList.length>1">
                      <span nz-popover>商品编号:{{ item.goodsInfo.goods_numList[0]+"..." }}</span>
                      <ng-template #nzTemplate>
                        <div style="max-width:300px">
                          <span class="dis-inline" *ngFor="let item2 of  item.goodsInfo.goods_numList;let i2=index">
                            <span style="display:inline-block;">{{item2}}</span><span
                            *ngIf="i2!=item.goodsInfo.goods_numList.length-1" class="ml-5 mr-5">|</span>
                          </span>
                        </div>
                      </ng-template>
                    </nz-popover>
                    <span *ngIf="item.goodsInfo.goods_numList.length==1">
                      商品编号:{{ item.goodsInfo.goods_numList[0] }}
                    </span>
                  </div>
                  <div style="height:40px;">{{ item?.goodsInfo.goods_name }}</div>
                </div>
              </div>
            </td>
            <td nz-td [attr.colspan]="group_type == 0 && (stage == 2 || stage == 1 || stage == 4) ? '4' : '3'"></td>
            <td nz-td>
              <div class="clearfix">
                <div class="font-bold">
                  商品原价
                </div>
                <div style="height:40px;">¥ {{ item?.goodsInfo.retail_price / 1000 }}</div>
              </div>
            </td>
          </tr>
          <ng-container *ngIf="item.showProduct && item.goodsInfo && item.goodsInfo.prize_info.length > 0">
            <tr nz-tbody-tr class="product-detail-td" *ngFor="let goods of item.goodsInfo.prize_info">
              <td nz-td colspan="6">
                <div class="clearfix product-item">
                  <div class="fl ">
                    <img class="product-cover"
                         [src]="goods?.prize_pic ? aliyunOssOutputUrl+'/'+goods?.prize_pic : '' "/>
                  </div>
                  <div class="product-detail">
                    <div class="font-bold">
                      <span>{{ goods?.level_name }}</span>
                      <span *ngIf="goods.prize_num">
                        <nz-popover [nzTitle]="'商品编号'" *ngIf="goods.prize_num.length>1">
                          <span nz-popover>商品编号:{{ goods.prize_num[0]+"..." }}</span>
                          <ng-template #nzTemplate>
                            <div style="max-width:300px">
                              <span class="dis-inline" *ngFor="let item2 of  goods.prize_num;let i2=index">
                                <span style="display:inline-block;">{{item2}}</span><span
                                *ngIf="i2!=goods.prize_num.length-1" class="ml-5 mr-5">|</span>
                              </span>
                            </div>
                          </ng-template>
                        </nz-popover>
                        <span *ngIf="goods.prize_num.length==1">
                          商品编号:{{ goods.prize_num[0] }}
                        </span>
                      </span>
                    </div>
                    <div>{{ goods?.prize_name }}</div>
                  </div>
                </div>
              </td>
              <td>
                <div class="font-bold">商品原价</div>
                <div>¥ {{ goods?.retail_price / 1000 }}</div>
              </td>
            </tr>
          </ng-container>
          <tr nz-tbody-tr *ngIf="item.showGroup">
            <td nz-td [attr.colspan]="group_type == 0 && (stage == 2 || stage == 1 || stage == 4) ? '8' : '7'"
                style=" background:#f7f7f7;">
              <table class="group-table" style="background:#f7f7f7;">
                <thead>
                <tr>
                  <th>成团人数</th>
                  <th>拼团总销量</th>
                  <th>分享次数</th>
                  <th>参团人数</th>
                  <th>成功团数</th>
                  <th>失败团数</th>
                </tr>
                </thead>
                <tbody>
                <tr *ngIf="item.groupInfo">
                  <td>{{ item?.groupInfo.suc_group_people_num }}</td>
                  <td>{{ item?.groupInfo.sales_total }}</td>
                  <td>{{ item?.groupInfo.share }}</td>
                  <td>{{ item?.groupInfo.join_group_people_num }}</td>
                  <td>{{ item?.groupInfo.suc_group_num }}</td>
                  <td>{{ item?.groupInfo.fail_group_num }}</td>
                </tr>
                </tbody>
              </table>
            </td>
          </tr>
        </ng-container>
        </tbody>
        <div noResult>
          <div class="text-center" style="margin-top:132px;margin-bottom:100px;">
            <i class="empty-icon"></i>
            <p>目前并无任何拼团</p>
            <p>请添加拼团</p>
          </div>
        </div>
      </nz-table>
    </div>
  </main-content>
</main-layout>
<nz-modal class="qrcodeModal" [nzWrapClassName]="'vertical-center-modal'" [nzWidth]="1100" [nzContent]="QrCodeContent"
          [nzVisible]="isVisibleMiddle" [nzTitle]="'拼团二维码'" (nzOnCancel)="handleCancelMiddle($event)"
          (nzOnOk)="handleOkMiddle($event)">
  <ng-template #QrCodeContent>
    <!--<nz-table-->
    <!--[nzCustomNoResult]="true"-->
    <!--[(nzPageSize)]="qrcodePageSize"-->
    <!--[(nzPageIndex)]="qrcodePage"-->
    <!--[(nzTotal)]="qrcodeTotal"-->
    <!--(nzPageIndexChange)="getQrcodeList()"-->
    <!--&gt;-->
    <!--<tbody nz-tbody>-->
    <!--<ng-container *ngIf="qrcodeList[activityId] && qrcodeList[activityId].length  > 0">-->
    <!--<ng-container *ngFor="let qrcode of qrcodeList[activityId]; let i = index;">-->
    <!--<ng-container *ngIf="i % 3 === 0">-->
    <!--<tr nz-tbody-tr>-->
    <!--</ng-container>-->
    <!--<td nz-td *ngIf="i === 0">-->
    <!--<div class="qrcodeForm-wrap" *ngIf="!qodeFormStatus">-->
    <!--<div class="ant-upload ant-upload-select ant-upload-select-picture-card">-->
    <!--<span tabindex="0" class="ant-upload" role="button" (click)="addQodeForm()">-->
    <!--<div><i class="anticon anticon-plus"></i><div class="ant-upload-text">新建二维码参数</div></div>-->
    <!--</span>-->
    <!--</div>-->
    <!--</div>-->
    <!--<div class="qrcodeForm-wrap addCodeWrap" *ngIf="qodeFormStatus">-->
    <!--<form nz-form [formGroup]="qrcodeForm">-->
    <!--<div nz-form-item nz-row>-->
    <!--<div nz-form-label nz-col [nzSm]="7" [nzXs]="24" nz-form-item-required>有效期：</div>-->
    <!--<div nz-form-control nz-col [nzSm]="17" [nzXs]="24">-->
    <!--<span nz-form-control [nzValidateStatus]="getFormControl('start_date')" class="date-pick-box">-->
    <!--<nz-datepicker style="width: 100%;" nzShowTime-->
    <!--(ngModelChange)="start_date=$event;_startValueChange()"-->
    <!--formControlName="start_date"-->
    <!--[nzDisabledDate]="_disabledStartDate"-->
    <!--[nzFormat]="'YYYY-MM-DD'"-->
    <!--[nzPlaceHolder]="'开始时间'"-->
    <!--[nzDisabled]="isLoadingAdd">-->
    <!--</nz-datepicker>-->
    <!--<div nz-form-explain *ngIf="getFormControl('start_date').dirty&&getFormControl('start_date').hasError('required')">请选择二维码有效期</div>-->
    <!--</span>-->
    <!--<span class="ver-top">-</span>-->
    <!--<span nz-form-control [nzValidateStatus]="getFormControl('end_date')" class="date-pick-box">-->
    <!--<nz-datepicker style="width: 100%;" nzShowTime-->
    <!--(ngModelChange)="end_date=$event;_endValueChange()"-->
    <!--formControlName="end_date"-->
    <!--[nzDisabledDate]="_disabledEndDate"-->
    <!--[nzFormat]="'YYYY-MM-DD'"-->
    <!--[nzPlaceHolder]="'结束时间'"-->
    <!--[nzDisabled]="isLoadingAdd">-->
    <!--</nz-datepicker>-->
    <!--<div nz-form-explain-->
    <!--*ngIf="getFormControl('end_date').dirty&&getFormControl('end_date').hasError('required')">请选择拼团结束时间</div>-->
    <!--</span>-->
    <!--</div>-->
    <!--</div>-->
    <!--<div nz-form-item nz-row>-->
    <!--<div nz-form-label nz-col [nzSm]="7" [nzXs]="24" nz-form-item-required>团长价格：</div>-->
    <!--<div nz-form-control nz-col [nzSm]="10" [nzXs]="24" [nzValidateStatus]="getFormControl('head_price')">-->
    <!--<nz-input-number-->
    <!--formControlName="head_price"-->
    <!--[nzMin]="0"-->
    <!--[nzStep]="1"-->
    <!--[nzDisabled]="true"-->
    <!--[nzPlaceHolder]="'请输入团长价格'"-->
    <!--[nzSize]="'large'"></nz-input-number>-->
    <!--</div>-->
    <!--</div>-->
    <!--<div nz-form-item nz-row>-->
    <!--<div nz-form-label nz-col [nzSm]="7" [nzXs]="24" nz-form-item-required>团长不发货：</div>-->
    <!--<div nz-form-control nz-col [nzSm]="10" [nzXs]="24" [nzValidateStatus]="getFormControl('checked')">-->
    <!--<label nz-checkbox formControlName="checked" [nzDisabled]="isLoadingAdd">-->
    <!--</label>-->
    <!--</div>-->
    <!--</div>-->
    <!--<div nz-form-item nz-row style="margin-bottom:8px;">-->
    <!--<div nz-form-control nz-col [nzSpan]="14" [nzOffset]="7">-->
    <!--<button nz-button [nzSize]="'large'" [nzType]="'primary'" [nzLoading]="isLoadingAdd" (click)="_submitForm()">{{ isLoadingAdd ? '添 加 中' : '添 加' }}</button>-->
    <!--<button nz-button [nzSize]="'large'" [nzType]="'default'" [disabled]="isLoadingAdd" type="button" (click)="cancelAddCode()"-->
    <!--style="margin-left: 20px">取 消</button>-->
    <!--</div>-->
    <!--</div>-->
    <!--</form>-->
    <!--</div>-->
    <!--</td >-->

    <!--<td nz-td>-->
    <!--<div class="qrcodeForm-wrap">-->
    <!--<div class="ant-upload ant-upload-select ant-upload-select-picture-card">-->
    <!--<span tabindex="0" class="ant-upload">-->
    <!--<div><i class="anticon anticon-plus"></i><div class="ant-upload-text">{{ qrcode.checked }}</div></div>-->
    <!--</span>-->
    <!--</div>-->
    <!--</div>-->
    <!--</td>-->
    <!--&lt;!&ndash;<ng-container *ngIf="i % 3 === 0">&ndash;&gt;-->
    <!--&lt;!&ndash;</tr>&ndash;&gt;-->
    <!--&lt;!&ndash;</ng-container>&ndash;&gt;-->
    <!--</ng-container>-->
    <!--&lt;!&ndash;<tr nz-tbody-tr>&ndash;&gt;-->
    <!--&lt;!&ndash;<td nz-td>&ndash;&gt;-->
    <!--&lt;!&ndash;<div class="qrcodeForm-wrap" *ngIf="!qodeFormStatus">&ndash;&gt;-->
    <!--&lt;!&ndash;<div class="ant-upload ant-upload-select ant-upload-select-picture-card">&ndash;&gt;-->
    <!--&lt;!&ndash;<span tabindex="0" class="ant-upload" role="button" (click)="addQodeForm()">&ndash;&gt;-->
    <!--&lt;!&ndash;<div><i class="anticon anticon-plus"></i><div class="ant-upload-text">新建二维码参数</div></div>&ndash;&gt;-->
    <!--&lt;!&ndash;</span>&ndash;&gt;-->
    <!--&lt;!&ndash;</div>&ndash;&gt;-->
    <!--&lt;!&ndash;</div>&ndash;&gt;-->
    <!--&lt;!&ndash;<div class="qrcodeForm-wrap addCodeWrap" *ngIf="qodeFormStatus">&ndash;&gt;-->
    <!--&lt;!&ndash;<form nz-form [formGroup]="qrcodeForm">&ndash;&gt;-->
    <!--&lt;!&ndash;<div nz-form-item nz-row>&ndash;&gt;-->
    <!--&lt;!&ndash;<div nz-form-label nz-col [nzSm]="7" [nzXs]="24" nz-form-item-required>有效期：</div>&ndash;&gt;-->
    <!--&lt;!&ndash;<div nz-form-control nz-col [nzSm]="17" [nzXs]="24">&ndash;&gt;-->
    <!--&lt;!&ndash;<span nz-form-control [nzValidateStatus]="getFormControl('start_date')" class="date-pick-box">&ndash;&gt;-->
    <!--&lt;!&ndash;<nz-datepicker style="width: 100%;" nzShowTime&ndash;&gt;-->
    <!--&lt;!&ndash;(ngModelChange)="start_date=$event;_startValueChange()"&ndash;&gt;-->
    <!--&lt;!&ndash;formControlName="start_date"&ndash;&gt;-->
    <!--&lt;!&ndash;[nzDisabledDate]="_disabledStartDate"&ndash;&gt;-->
    <!--&lt;!&ndash;[nzFormat]="'YYYY-MM-DD'"&ndash;&gt;-->
    <!--&lt;!&ndash;[nzPlaceHolder]="'开始时间'"&ndash;&gt;-->
    <!--&lt;!&ndash;[nzDisabled]="isLoadingAdd">&ndash;&gt;-->
    <!--&lt;!&ndash;</nz-datepicker>&ndash;&gt;-->
    <!--&lt;!&ndash;<div nz-form-explain *ngIf="getFormControl('start_date').dirty&&getFormControl('start_date').hasError('required')">请选择二维码有效期</div>&ndash;&gt;-->
    <!--&lt;!&ndash;</span>&ndash;&gt;-->
    <!--&lt;!&ndash;<span class="ver-top">-</span>&ndash;&gt;-->
    <!--&lt;!&ndash;<span nz-form-control [nzValidateStatus]="getFormControl('end_date')" class="date-pick-box">&ndash;&gt;-->
    <!--&lt;!&ndash;<nz-datepicker style="width: 100%;" nzShowTime&ndash;&gt;-->
    <!--&lt;!&ndash;(ngModelChange)="end_date=$event;_endValueChange()"&ndash;&gt;-->
    <!--&lt;!&ndash;formControlName="end_date"&ndash;&gt;-->
    <!--&lt;!&ndash;[nzDisabledDate]="_disabledEndDate"&ndash;&gt;-->
    <!--&lt;!&ndash;[nzFormat]="'YYYY-MM-DD'"&ndash;&gt;-->
    <!--&lt;!&ndash;[nzPlaceHolder]="'结束时间'"&ndash;&gt;-->
    <!--&lt;!&ndash;[nzDisabled]="isLoadingAdd">&ndash;&gt;-->
    <!--&lt;!&ndash;</nz-datepicker>&ndash;&gt;-->
    <!--&lt;!&ndash;<div nz-form-explain&ndash;&gt;-->
    <!--&lt;!&ndash;*ngIf="getFormControl('end_date').dirty&&getFormControl('end_date').hasError('required')">请选择拼团结束时间</div>&ndash;&gt;-->
    <!--&lt;!&ndash;</span>&ndash;&gt;-->
    <!--&lt;!&ndash;</div>&ndash;&gt;-->
    <!--&lt;!&ndash;</div>&ndash;&gt;-->
    <!--&lt;!&ndash;<div nz-form-item nz-row>&ndash;&gt;-->
    <!--&lt;!&ndash;<div nz-form-label nz-col [nzSm]="7" [nzXs]="24" nz-form-item-required>团长价格：</div>&ndash;&gt;-->
    <!--&lt;!&ndash;<div nz-form-control nz-col [nzSm]="10" [nzXs]="24" [nzValidateStatus]="getFormControl('head_price')">&ndash;&gt;-->
    <!--&lt;!&ndash;<nz-input-number&ndash;&gt;-->
    <!--&lt;!&ndash;formControlName="head_price"&ndash;&gt;-->
    <!--&lt;!&ndash;[nzMin]="0"&ndash;&gt;-->
    <!--&lt;!&ndash;[nzStep]="1"&ndash;&gt;-->
    <!--&lt;!&ndash;[nzDisabled]="true"&ndash;&gt;-->
    <!--&lt;!&ndash;[nzPlaceHolder]="'请输入团长价格'"&ndash;&gt;-->
    <!--&lt;!&ndash;[nzSize]="'large'"></nz-input-number>&ndash;&gt;-->
    <!--&lt;!&ndash;</div>&ndash;&gt;-->
    <!--&lt;!&ndash;</div>&ndash;&gt;-->
    <!--&lt;!&ndash;<div nz-form-item nz-row>&ndash;&gt;-->
    <!--&lt;!&ndash;<div nz-form-label nz-col [nzSm]="7" [nzXs]="24" nz-form-item-required>团长不发货：</div>&ndash;&gt;-->
    <!--&lt;!&ndash;<div nz-form-control nz-col [nzSm]="10" [nzXs]="24" [nzValidateStatus]="getFormControl('checked')">&ndash;&gt;-->
    <!--&lt;!&ndash;<label nz-checkbox formControlName="checked" [nzDisabled]="isLoadingAdd">&ndash;&gt;-->
    <!--&lt;!&ndash;</label>&ndash;&gt;-->
    <!--&lt;!&ndash;</div>&ndash;&gt;-->
    <!--&lt;!&ndash;</div>&ndash;&gt;-->
    <!--&lt;!&ndash;<div nz-form-item nz-row style="margin-bottom:8px;">&ndash;&gt;-->
    <!--&lt;!&ndash;<div nz-form-control nz-col [nzSpan]="14" [nzOffset]="7">&ndash;&gt;-->
    <!--&lt;!&ndash;<button nz-button [nzSize]="'large'" [nzType]="'primary'" [nzLoading]="isLoadingAdd" (click)="_submitForm()">{{ isLoadingAdd ? '添 加 中' : '添 加' }}</button>&ndash;&gt;-->
    <!--&lt;!&ndash;<button nz-button [nzSize]="'large'" [nzType]="'default'" [disabled]="isLoadingAdd" type="button" (click)="cancelAddCode()"&ndash;&gt;-->
    <!--&lt;!&ndash;style="margin-left: 20px">取 消</button>&ndash;&gt;-->
    <!--&lt;!&ndash;</div>&ndash;&gt;-->
    <!--&lt;!&ndash;</div>&ndash;&gt;-->
    <!--&lt;!&ndash;</form>&ndash;&gt;-->
    <!--&lt;!&ndash;</div>&ndash;&gt;-->
    <!--&lt;!&ndash;</td >&ndash;&gt;-->
    <!--&lt;!&ndash;</tr>&ndash;&gt;-->
    <!--</ng-container>-->
    <!--</tbody>-->
    <!--</nz-table>-->
    <section class="code-box">
      <nz-spin class="code-loading" *ngIf="codeLoading" [nzTip]="'正在加载二维码列表...'">
      </nz-spin>
      <div class="qrcodeForm-wrap" *ngIf="!qodeFormStatus && qrcodePage === 1">
        <div class="ant-upload ant-upload-select ant-upload-select-picture-card">
            <span tabindex="0" class="ant-upload" role="button" (click)="addQodeForm()">
              <div><i class="anticon anticon-plus"></i><div class="ant-upload-text">新建二维码参数</div></div>
            </span>
        </div>
      </div>
      <div class="qrcodeForm-wrap addCodeWrap" *ngIf="qodeFormStatus && qrcodePage === 1">
        <form nz-form [formGroup]="qrcodeForm">
          <div nz-form-item nz-row>
            <div nz-form-label nz-col [nzSm]="7" [nzXs]="24" nz-form-item-required>有效期：</div>
            <div nz-form-control nz-col [nzSm]="17" [nzXs]="24">
                    <span nz-form-control [nzValidateStatus]="getFormControl('start_date')" class="date-pick-box">
                      <nz-datepicker style="width: 100%;" nzShowTime
                                     (ngModelChange)="start_date=$event;_startValueChange()"
                                     formControlName="start_date"
                                     [nzDisabledDate]="_disabledStartDate"
                                     [nzFormat]="'YYYY-MM-DD'"
                                     [nzPlaceHolder]="'开始时间'"
                                     [nzDisabled]="isLoadingAdd">
                      </nz-datepicker>
                      <div nz-form-explain
                           *ngIf="getFormControl('start_date').dirty&&getFormControl('start_date').hasError('required')">请选择二维码有效期</div>
                    </span>
              <span class="ver-top">-</span>
              <span nz-form-control [nzValidateStatus]="getFormControl('end_date')" class="date-pick-box">
                      <nz-datepicker style="width: 100%;" nzShowTime
                                     (ngModelChange)="end_date=$event;_endValueChange()"
                                     formControlName="end_date"
                                     [nzDisabledDate]="_disabledEndDate"
                                     [nzFormat]="'YYYY-MM-DD'"
                                     [nzPlaceHolder]="'结束时间'"
                                     [nzDisabled]="isLoadingAdd">
                      </nz-datepicker>
                      <div nz-form-explain
                           *ngIf="getFormControl('end_date').dirty&&getFormControl('end_date').hasError('required')">请选择拼团结束时间</div>
                     </span>
            </div>
          </div>
          <div nz-form-item nz-row>
            <div nz-form-label nz-col [nzSm]="7" [nzXs]="24">团长价格：</div>
            <div nz-form-control nz-col [nzSm]="10" [nzXs]="24" [nzValidateStatus]="getFormControl('head_free_price')">
              <nz-input-number
                formControlName="head_free_price"
                [nzMin]="0"
                [nzStep]="1"
                [nzDisabled]="true"
                [nzPlaceHolder]="'请输入团长价格'"
                [nzSize]="'large'"></nz-input-number>
            </div>
          </div>
          <div nz-form-item nz-row style="margin-bottom:0 !important;">
            <div nz-form-label nz-col [nzSm]="7" [nzXs]="24">团长发货：</div>
            <div nz-form-control nz-col [nzSm]="10" [nzXs]="24" [nzValidateStatus]="getFormControl('is_give')">
              <label nz-checkbox formControlName="is_give" [nzDisabled]="isLoadingAdd">
              </label>
            </div>
          </div>
          <div nz-form-item nz-row>
            <div nz-form-label nz-col [nzSm]="7" [nzXs]="24">小程序显示：</div>
            <div nz-form-control nz-col [nzSm]="10" [nzXs]="24" [nzValidateStatus]="getFormControl('is_show')">
              <label nz-checkbox formControlName="is_show" [nzDisabled]="isLoadingAdd">
              </label>
            </div>
          </div>
          <div nz-form-item nz-row style="margin-bottom:8px;">
            <div nz-form-control nz-col [nzSpan]="14" [nzOffset]="7">
              <button nz-button [nzSize]="'large'" [nzType]="'primary'" [nzLoading]="isLoadingAdd"
                      (click)="_submitForm()">{{ isLoadingAdd ? '添 加 中' : '添 加' }}
              </button>
              <button nz-button [nzSize]="'large'" [nzType]="'default'" [disabled]="isLoadingAdd" type="button"
                      (click)="cancelAddCode()"
                      style="margin-left: 20px">取 消
              </button>
            </div>
          </div>
        </form>
      </div>
      <ng-container *ngIf="qrcodeList">
        <ng-container *ngFor="let qrcode of qrcodePageList;let i = index;">
          <nz-popover class="qrcodeForm-wrap" [nzTitle]="'二维码信息'" [nzTrigger]="'hover'"
                      *ngIf="qrcode['activity_goods']['0']['qr_code_url']">
            <div nz-popover>
              <div class="ant-upload ant-upload-select ant-upload-select-picture-card">
            <span tabindex="0" class="ant-upload">
              <div style="position: relative" (mouseenter)="showShadow(i,qrcode['invalid'])"
                   (mouseleave)="hideShadow(i,qrcode['invalid'])">
                <img style="width:100%;height:100%;" [ngClass]="{'qrcode-invalid-shadow': qrcode['invalid']}"
                     src="{{qrcode['activity_goods']['0']['qr_code_url'] ? qrcode['activity_goods']['0']['qr_code_url'] :''}}"
                     alt="">
                <span [ngClass]="{'qrcode-edit-shadow':qrcode['shadow']}"></span>
                <button nz-button [nzType]="'primary'" *ngIf="qrcode['shadow']" (click)="toggleShow(qrcode)"
                        class="qrcode-edit-btn">{{qrcode['status'] === '正常' ? '点击活动暂停':'点击活动开启'}}</button>
                <button nz-button [nzType]="'primary'" *ngIf="qrcode['shadow']"
                        (click)="downloadQrcode(qrcode['activity_goods']['0']['qr_code_url'])"
                        class="qrcode-edit-btn download-btn">下载二维码</button>
                <p *ngIf="qrcode['invalid']" class="qrcode-invalid-text">已失效</p>
              </div>
            </span>
              </div>
            </div>
            <ng-template #nzTemplate>
              <div>
                <p><span class="codepop-label">拼团名称:</span>{{qrcode.name}}</p>
                <p><span class="codepop-label">有效时间:</span>{{qrcode['start_date']}} - {{qrcode['end_date']}}</p>
                <p><span class="codepop-label">团长价格:</span>{{qrcode.activity_goods['0']['head_free_price']}}</p>
                <p><span class="codepop-label">团长发货:</span>{{qrcode.activity_goods['0']['is_give'] ? '发货':'不发货'}}</p>
                <p><span class="codepop-label">小程序显示:</span>{{qrcode['is_show'] ? '显示':'不显示'}}</p>
              </div>
            </ng-template>
          </nz-popover>
        </ng-container>
        <!--<div class="qrcodeForm-wrap" *ngFor="let qrcode of qrcodeList">-->
        <!--<div class="ant-upload ant-upload-select ant-upload-select-picture-card">-->
        <!--<span tabindex="0" class="ant-upload">-->
        <!--<div><img style="width:310px;height:310px;" src="{{qrcode.activity_goods['0']['qr_code_url'] ? qrcode.activity_goods['0']['qr_code_url'] :''}}" alt=""></div>-->
        <!--</span>-->
        <!--</div>-->
        <!--</div>-->
      </ng-container>
    </section>
    <div class="qrcodeForm-ppagination">
      <span class="qrcodeTotal-text">共 {{qrcodeList.length}} 条</span>
      <nz-pagination style="display: inline-block" [nzPageIndex]="qrcodePage"
                     (nzPageIndexClickChange)="getQrCodeList($event)" [nzPageSize]="qrcodePageSize"
                     [nzTotal]="qrcodeTotal || 0"></nz-pagination>
    </div>
  </ng-template>
</nz-modal>
